<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
    <link href="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>

</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<body>
<div id="app">
    <el-container>
        <el-header>
        </el-header>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input placeholder="请输入订单号" v-model="sales_order_no">
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-input placeholder="请输入下单员" v-model="sales_man">
                    </el-input>
                </el-col>
                <#--<el-col :span="5">-->
                    <#--<el-date-picker v-model="time_zones" type="daterange" range-separator="至" start-placeholder="开始日期"-->
                                    <#--end-placeholder="结束日期">-->
                    <#--</el-date-picker>-->
                <#--</el-col>-->
                <el-col :span="4">
                    <el-date-picker
                            v-model="startTime"
                            type="date"
                            placeholder="开始日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="4">
                    <el-date-picker
                            v-model="endTime"
                            type="date"
                            placeholder="结束日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="sales_status" placeholder="请选择订单状态">
                        <el-option v-for="item in sales_status_list" :key="item.sales_status_code" :label="item.sales_status"
                                   :value="item.sales_status_code">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-table :data="tableData" stripe border style="width:100%" highlight-current-row size="mini">
                　　<el-table-column prop="orderBill_id" label="订单编号" align="center">
                　　</el-table-column>
                　　<el-table-column prop="consignee_name" label="订单名称" align="center">
                　　</el-table-column>
                <el-table-column prop="user_name" label="下单员" align="center">
                    　　</el-table-column>
                　　<el-table-column prop="company_name" label="所属公司" align="center">
                　　</el-table-column>
                <el-table-column prop="crtTime" label="下单时间" align="center" min-width="50">
                    　　</el-table-column>
                　　<el-table-column v-if prop="price" label="订单金额（元）" align="center">
                　　</el-table-column>
                <el-table-column prop="payment" label="订单状态" align="center" :formatter="formatStatus" >
                    　　</el-table-column>
                　
                　　<el-table-column label="操作" align="center" min-width="100">
                　　　　<template slot-scope="scope">
                　　　　　<template v-for="item in button">
                            <el-button type="text" @click="item.fn(scope.row.sales_order_no,scope.row.sales_order_name)">{{item.name}}</el-button>
                        </template>
                　　　　</template>
                　　</el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-row type="flex" justify="center">
                <el-col :span="12">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :page-sizes="[2, 100, 200, 500]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                                   :total="totalRecords" style="text-align: center;">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-footer>
        <el-dialog title="请上传凭证" :visible.sync="dialogFormVisible" ref="upload">
            <el-form>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="订单编号" prop="sales_order_no">
                            <el-input :disabled="true" v-model="sales_order_no"></el-input>
                            </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="4">
                        <el-form-item label="订单名称" prop="sales_order_name">
                            <el-input :disabled="true" v-model="sales_order_name"></el-input>
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-input placeholder="付款金额" v-model="sales_amount">
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="凭证上传">
                            <!-- <el-upload ref="upload" list-type="picture-card" limit:1 multiple:false action="https://jsonplaceholder.typicode.com/posts/"
                                :before-upload="beforeUpload" :auto-upload="false" :before-remove="beforeRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog> -->
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                       :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove"
                                       list-type="picture" limit:1 multiple:false>
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpload">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</div>

<script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dialogFormVisible: false,
                dialogVisible: false,
                dialogImageUrl: '',
                sales_order_no: '',
                sales_order_name: '',
                sales_amount: '',
                tableData: [],
                currentPage: 1, //当前页
                pageSize: 2, //每页总数
                totalRecords: 4, //总条数
                sales_status_list: [{
                    sales_status_code: 99,
                    sales_status: '已保存'
                }, {
                    sales_status_code: 11,
                    sales_status: '下单中（待供方确认）'
                }, {
                    sales_status_code: 22,
                    sales_status: '已下单（供方已确认）'
                }, {
                    sales_status_code: 33,
                    sales_status: '待收货'
                }, {
                    sales_status_code: 44,
                    sales_status: '已完成'
                }],
                sales_status: "",
                time_zones: "",
                sales_order_no: '',
                sales_man: "",
                file: '',
                param: '',
                startTime: '',
                endTime: '',
                //后台权限列表拼接
                button: [{
                    name: '删除',

                    fn: this.del
                }, {
                    name: '修改',
                    fn: this.modify

                }],
            };
            show: false

        },

        methods: {
            handleRemove(file) {
                console.log(file);
            },
            handlePreview(file) {
                console.log(file);
            },
            submitUpload() {
                this.beforeUpload();
                // var file = this.file;
                var sales_amount = this.sales_amount;
                var sales_order_no = this.sales_order_no;
                // console.log("asdfasfdasf:" + file);
                // this.dialogFormVisible = false;

            },
            beforeUpload(file) {
                this.file = file;
                console.log("file:" + file);
                return false;

            },
            beforeRemove(file) {
                this.file = file;
                console.log(file);
            },
            //状态转换
            formatStatus: function (row, column) {
                return row.payment == 99 ? '已保存' : row.payment ==
                11 ? '下单中（待供方确认）' : row.payment ==
                22 ?
                        '已下单（供方已确认）' : row.payment == 33 ? '待收货' : row.payment == 44 ? '已完成' :
                                '未知';
            },
            search() {
                //声明要发送的参数
                var page = this.currentPage;
                var limit = this.pageSize;
                var sales_status = this.sales_status;
                var time_zones = this.time_zones;
                var sales_order_no = this.sales_order_no;
                var sales_man = this.sales_man;
                //声明变量接收返回的列表
                var tableDtotalRecordsata = '';
                //声明变量接收返回的总页数
                var totalRecords = '';
                $.ajax({
                    url: "url?page=" + page + "&limit=" + limit +
                    "&sales_status=" + sales_status + "&time_zones=" + time_zones +
                    "&sales_order_no=" + sales_order_no + "&sales_man=" +
                    sales_man,
                    type: "GET",
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        if (data.ret) {
                            //列表
                            tableData = data.data;
                            //总页数
                            totalRecords = data.count;
                        } else {

                        }
                    }
                });
                //刷新当前值
                this.totalRecords = totalRecords;
                this.tableData = tableData;
            },
            //删除用户
            del(val) {
                console.log(val);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //修改用户
            modify(sales_order_no, sales_order_name) {
                console.log(sales_order_no, sales_order_name);
                this.sales_order_no = sales_order_no;
                this.sales_order_name = sales_order_name;
                this.dialogFormVisible = true

            },
            //查看详情
            detail(val) {
                console.log(val)
            },
            async handleSizeChange(val) {
                <#--console.log(`每页: ${val}`);-->
                this.pageSize = val;
                //     var response = await axios.post("sda/fds?page="+val);
                //    this.data= response.data
            },
            //
            async handleCurrentChange(val) {

                <#--console.log(`当前页: ${val}`);-->
                <#--console.log(`每页：${this.pageSize}`);-->
                this.currentPage = val;
                //     var response = await axios.post("sda/fds?page="+val);
                //    this.data= response.data
            },

            ajaxFunction(orderNo,userName,beginTime,endTime,state,str,page,size){
                var key = str;
                var resultData = '';
                $.ajax({
                    url: '/sales/orderList.json',
                    type: 'post',
                    data: {orderNo:orderNo,userName:userName,startTime:beginTime,endTime:endTime,state:state,key:key,page:page,size:size},
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        console.log(result.data)
                        if(result.ret){
                            resultData = result.data;
                        }
                    }
                });
                this.tableData = resultData.list;
                this.currentPage = resultData.pageIndex;
                this.pageSize = parseInt(resultData.size);
                this.totalRecords = resultData.total;
                // this.button = resultData.operaButton;
                // var tempVue=this;
                // this.button.forEach(function (ele) {
                //     ele.fn=tempVue[ele.fn]
                // })
                console.log(this.data.tableData);
            },
        },

        async mounted(){
            this.ajaxFunction(null,null,null,null,null,null,null,null);
        }
    })
</script>
</body>

</html>